<template>
  <el-image :src="headerImg" style="margin-top: -60px; z-index: -1"/>
  <div class="about" style="margin-left: 300px">
    <h1>历史记录</h1>
    <el-table :data="historyData" height="250" style="width: 100%">
      <el-table-column prop="hasError" label="是否有错误" width="300" />
      <el-table-column prop="probability" label="错误概率" width="300" :formatter="tableFormatter"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleDetail(scope.$index, scope.row)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog
      v-model="dialogVisible"
      title="详情"
      width="95vw"
  >
    <el-row :gutter="23" align="middle">
      <el-col :span="11">
        <el-card>
          <CodeView :code="historyData[curDetailIndex].origin"/>
        </el-card>
      </el-col>
      <el-col :span="1">
        <el-image :src="arrowRight"/>
      </el-col>
      <el-col :span="11">
        <ResultView :result="historyData[curDetailIndex]"/>
      </el-col>
    </el-row>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import axios from "axios";
import baseUrl from "@/url/baseUrl";
import {ElMessage} from "element-plus";
import headerImg from "@/assets/header.png";
import arrowRight from "@/assets/arrow-right.svg";
import CodeView from "@/components/CodeView.vue";
import ResultView from "@/components/ResultView.vue";

interface Result {
  hasError: boolean,
  probability: number,
  origin: string,
  fix: string
}

const historyData = ref<Result[]>()

const dialogVisible = ref(false)

const curDetailIndex = ref(0)

onMounted(()=>{
  getHistory()
})

const tableFormatter = (row: any, column: any, cellValue: any) => {
  return cellValue + "%"
}

const handleDetail = (index: number, row: any) => {
  curDetailIndex.value = index
  dialogVisible.value = true
}

const getHistory = () => {
  axios.get(
      `${baseUrl.service}/history`
  ).then((res) => {
    if (res.status != 200) {
      ElMessage("获取历史记录失败")
    } else {
      historyData.value = res.data
    }
  }).catch((err) => {
    ElMessage("获取历史记录失败")
  })
}
</script>
